<template>
	<view class="content flex f-d-c a-i-c" :style="page_style">
		<view class="live-top-box flex a-i-c j-c-b">
			<view class="left flex a-i-c" @click="goTo({url:'/pages/live/myLiveCenter'})">
				<view class="avatar">
					<image class="image" src="" mode=""></image>
					<view class="is-live">
						<view class="ready-live-box all-center">
							<view class="line-item" style="margin-right: 2rpx;"></view>
							<view class="line-item" style="margin-right: 2rpx;"></view>
							<view class="line-item"></view>
						</view>
					</view>
				</view>
				<view class="f-s-28 f-w-b color-fff">
					<view class="" style="white-space: nowrap;">
						卡车圈一枝花
					</view>
					<view class="l-h-34" style="font-size: 18rpx;">
						人气3526
					</view>
				</view>
				<view class="like-button all-center color-fff f-w-b f-s-32">
					+
					<!-- <image class="icon-image" src="@/static/live/like-button-icon.svg" mode=""></image> -->
				</view>
			</view>
			<view class="right flex a-i-c">
				<view class="user-item">
					<image class="avatar" src="@/static/logo.png" mode=""></image>
				</view>
				<view class="user-item">
					<image class="avatar" src="@/static/logo.png" mode=""></image>
				</view>
				<view class="user-item">
					<image class="avatar" src="@/static/logo.png" mode=""></image>
				</view>
				<view class="user-item all-center color-fff f-s-26 l-h-34">
					77
				</view>
				<view class="user-item all-center" @click="goBack">
					<image class="close-icon" src="@/static/live/live-close-icon.svg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="dom-video">
			<dom-video :autoplay="true" :loop="true" :controls="false"></dom-video>
		</view>
		<view class="bottom-msg flex f-d-c" :style="{paddingBottom:paddingBotton}">
			<view class="msg-list-box">
				<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false">
					<view class="flexa">
						<view class="msg-box flex a-i-c join-live">
							<image class="avatar2" src="@/static/logo.png" mode=""></image>
							<text class="f-s-22 color-fff">进入了直播间</text>
						</view>
						
						<view class="msg-box flex a-i-c msg" @click="showPopup('liveUserPopup')">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24" style="color: #FF6CAA;">为主播点赞了</text>
							<image class="zan" src="@/static/live/click-zan.svg" mode=""></image>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
						
						<view class="msg-box flex a-i-c msg">
							<image class="avatar" src="@/static/logo.png" mode=""></image>
							<text class="f-s-26 color-fff">进入了直播间</text>
						</view>
						<view class="msg-box flex a-i-c msg-text">
							<text class="f-s-24 color-fff">太棒了吧！果断关注！</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="menu-list-box flex j-c-b a-i-c">
				<view class="input">
					<input type="text" class="w-100 color-fff" placeholder="说点什么吧~" placeholder-style="color:rgba(255,255,255,0.48);font-size:24rpx;">
				</view>
				<view class="icon-list-box flex a-i-c">
					<image class="icon-item" @click="cancleLive" src="@/static/live/close-live-btn-icon.svg" mode=""></image>
					<image class="icon-item" @click="showPopup('linkPopup')" src="@/static/live/live-link-other.svg" mode=""></image>
					<image class="icon-item" @click="cancleLink" src="@/static/live/stop-link-icon.svg" mode=""></image>
					<image class="icon-item" @click="showPopup('goodPopup')" src="@/static/live/live-goods-popup.svg" mode=""></image>
				</view>
			</view>
		</view>
		<uni-popup type="bottom" ref="goodPopup" mask-background-color="rgba(0,0,0,0)">
			<view class="goods-list-box">
				<view class="shop-box flex j-c-b a-i-c">
					<view class="left flex a-i-c f-s-30 color-fff">
						<image class="shop-icon" src="@/static/live/live-shop-icon.svg" mode=""></image>
						店铺名称店铺名称
					</view>
					<view class="right f-s-28 color-fff flex a-i-c">
						进入店铺
						<image class="image" src="@/static/live/live-go-shop-icon.svg" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="goods-scroll-view">
					<view class="goods-items">
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
						<live-good-box></live-good-box>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="linkPopup" mask-background-color="rgba(0,0,0,0)">
			<view class="link-popup-box">
				<view class="top-text f-s-24">
					连线
					<image class="close-icon" src="@/static/live/close-icon-live.svg" @click="closePopup('linkPopup')" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="link-scroll">
					<view class="items">
						<view class="item">
							<user-box background="none" :buttonList="buttonList" :shopButton="false" configBackground="rgba(255,255,255,0.23)"></user-box>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="liveUserPopup" mask-background-color="rgba(0,0,0,0)">
			<view class="user-box-info">
				<view class="user-info-box w-100 flex a-i-c j-c-b">
					<view class="avatar-user flex a-i-c">
						<view class="avatar">
							<image class="image" src="@/static/logo.png" mode=""></image>
						</view>
						<view class="flex f-d-c">
							<view class="f-s-32 color-fff f-w-b l-h-44">
								卡车圈一朵金花
							</view>
							<view class="f-s-24 l-h-44" style="color: rgba(255,255,255,0.44);margin-top: 12rpx;">
								用户ID:28378955
							</view>
						</view>
					</view>
					<view class="like-user-btn all-center f-s-26 color-fff">
						关注
					</view>
				</view>
				<view class="user-config f-s-26 color-fff">
					设为管理员
				</view>
				<view class="user-config f-s-26 color-fff">
					取消管理员
				</view>
				<view class="user-config f-s-26 color-fff">
					解除禁言
				</view>
				<view class="user-config f-s-26 color-fff">
					禁言此用户
				</view>
				<view class="user-config f-s-26 color-fff">
					踢出直播间
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	import userBox from "../components/user-box.vue"
	import liveGoodBox from "../components/good-box.vue"
	import {goBack,goTo} from "@/nav.js"
	export default {
		components:{
			"dom-video":isDomVideo,
			"user-box":userBox,
			"live-good-box":liveGoodBox
		},
		data() {
			return {
				page_style:{},
				paddingBotton:0,
				buttonList:[
					{
						id:1,
						text:"不再显示"
					},
					{
						id:2,
						text:"屏蔽此人"
					}
				]
			};
		},
		onLoad() {
			this.inipage()
		},
		onShow() {
			
		},
		methods:{
			goBack,goTo,
			cancleLink(){
				uni.showModal({
					title:"提示",
					content:"是否要解除连线？",
					cancelText:"取消",
					cancelColor:"#999999",
					confirmText:"确定解除",
					success(res) {
						if(res.confirm){}
					}
				})
			},
			cancleLive(){
				uni.showModal({
					title:"提示",
					content:"累积32人观看，人气值2132是否结束直播？",
					cancelText:"取消",
					cancelColor:"#999999",
					confirmText:"结束直播",
					success(res) {
						if(res.confirm){}
					}
				})
			},
			showPopup(text){
				this.$refs[text].open()
			},
			closePopup(text){
				this.$refs[text].close()
			},
			inipage(){
				let sys = uni.getSystemInfoSync()
				let isIphone = sys.model.indexOf("iPhone")<0?false:true
				let paddingTop = sys.statusBarHeight+'px'
				let top_number = sys.statusBarHeight+(this.isIphone?44:48)
				let height = (sys.statusBarHeight+(this.isIphone?44:48))+'px'
				this.paddingBotton=sys.safeAreaInsets.bottom + 10 + 'px;'
				console.log(sys)
				this.page_style = {
					paddingTop,
				}
			}
		}
	}
</script>
<style>
	scroll-view ::-webkit-scrollbar{
		display: none !important;
	}
</style>
<style lang="scss" scoped>
	.goods-list-box{
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.684) 52.78%, rgba(0, 0, 0, 0.9) 100%);
		border-radius: 32upx 32upx 0 0;
		padding: 21upx 16upx;
		width: 100%;
		.goods-scroll-view{
			width: 100%;
			height: 820upx;
			.goods-items{
				width: 100%;
				display: inline-flex;
				flex-direction: column;
			}
		}
		.shop-box{
			width: 100%;
			margin-bottom: 34upx;
			.right{
				.image{
					width: 20upx;
					height: 20upx;
					margin-left: 12upx;
				}
			}
			.left{
				.shop-icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.user-box-info{
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.684) 52.78%, rgba(0, 0, 0, 0.9) 100%);
		border-radius: 32upx 32upx 0 0;
		padding: 60upx 24upx;
		.user-config{
			width: 100%;
			border-bottom: 2upx solid rgba(255,255,255,0.25);
			padding: 28upx 24upx;
		}
		.user-info-box{
			width: 100%;
			padding: 28upx 24upx;
			.like-user-btn{
				background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
				width: 150upx;
				height: 56upx;
				border-radius: 28upx;
			}
			.avatar-user{
				.avatar{
					border: 4upx solid #FFFFFF;
					width: 128upx;
					height: 128upx;
					border-radius: 50%;
					margin-right: 34upx;
					.image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
		}
	}
	.link-popup-box{
		width: 100%;
		height: 1090upx;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.684) 52.78%, rgba(0, 0, 0, 0.9) 100%);
		border-radius: 32upx 32upx 0 0;
		.top-text{
			height: 74upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			position: relative;
			.close-icon{
				width: 28upx;
				height: 28upx;
				position: absolute;
				z-index: 2;
				right: 32upx;
				top: 24upx;
			}
		}
		.link-scroll{
			width: 100%;
			height: calc(100% - 80upx);
			.items{
				display: inline-flex;
				flex-direction: column;
				width: 100%;
				padding: 0 24upx;
				.item{
					width: 100%;
					border-bottom: 2upx solid #E9E9E947
				}
			}
		}
	}
	.bottom-msg{
		position: fixed;
		bottom:0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 5;
		justify-content: flex-end;
		padding: 0 36upx;
		.msg-list-box{
			width: 100%;
			height: 758upx;
			margin-bottom: 20upx;
			.scroll-view{
				width: 100%;
				height: 100%;
				
				scrollbar-width: none;
				.flexa{
					display: inline-flex;
					flex-direction: column;
					align-items: flex-start;
				}
				.join-live{
					background: rgba(255,255,255,0.1);
					padding: 6upx 20upx;
					border-radius: 58upx;
					margin-bottom: 24upx;
				}
				.msg{
					margin-bottom: 8upx;
				}
				.msg-text{
					background: rgba(255,255,255,0.1);
					padding: 6upx 20upx;
					border-radius: 58upx;
					margin-bottom: 16upx;
				}
				.msg-box{
					.zan{
						width: 26upx;
						height: 26upx;
						margin-left: 8upx;
					}
					.avatar{
						width: 40upx;
						height: 40upx;
						margin-right: 8upx;
						border-radius: 50%;
					}
					.avatar2{
						width: 32upx;
						height: 32upx;
						border-radius: 50%;
						margin-right: 8upx;
					}
				}
			}
		}
		.menu-list-box{
			width: 100%;
			.icon-list-box{
				.icon-item{
					width: 60upx;
					height: 60upx;
					margin: 0 3upx;
				}
			}
			.input{
				width: 436upx;
				height: 64upx;
				padding: 6upx 20upx;
				border-radius: 58upx;
				background: rgba(255,255,255,0.1);
				input{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.live-botton{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.live-top-box{
		width: 100%;
		padding: 0 30upx;
		position: relative;
		z-index: 7;
		.right{
			.user-item{
				width: 64upx;
				height: 64upx;
				background: rgba(95, 99, 107, 0.6);
				margin: 0 6upx;
				overflow: hidden;
				border-radius: 50%;
				.close-icon{
					width: 32upx;
					height: 32upx;
				}
				.avatar{
					width: 100%;
					height: 100%;
				}
			}
		}
		.left{
			height: 72upx;
			border-radius: 36upx;
			padding: 4upx 6upx;
			background: #5F636B99;
			.like-button{
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				background: linear-gradient(265.42deg, #FA360A 2.47%, #FA8C0A 91.63%);
				margin-left: 10upx;
				.icon-image{
					width: 24upx;
					height: 24upx;
				}
			}
			.avatar{
				width: 64upx;
				height: 64upx;
				margin-right: 14upx;
				position: relative;
				border-radius: 50%;
				background: #FFFFFF;
				.image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
				.is-live{
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4upx solid #EE8300;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					.ready-live-box{
						position: absolute;
						right: 0;
						bottom: 0;
						width: 24upx;
						height: 24upx;
						background: linear-gradient(78.2deg, #FBB10B 0%, #FB3A0B 100%);
						border-radius: 50%;
						.line-item{
							width: 2upx;
							border-radius: 4upx;
							background: #FFFFFF;
						}
						.line-item:nth-child(1){
							height: 12upx;
							animation: line 1s ease-out infinite;
						}
						.line-item:nth-child(2){
							height: 6upx;
							animation: line 1s ease-out infinite;
						}
						.line-item:nth-child(3){
							height: 10upx;
							animation: line 1s ease-out infinite;
						}
					}
				}
			}
		}
	}
	@keyframes line {
		 0% {
		    transform: scaleY(0); /* 初始状态为无高度 */
		  }
		  50% {
		    transform: scaleY(1); /* 中间状态为完整高度 */
		  }
		  100% {
		    transform: scaleY(0); /* 结束状态为无高度 */
		  }
	}
	.dom-video{
		width: 100%;
		height: 100%;
		position: fixed;
		inset: 0;
		z-index: 3;
	}
	.content{
		width: 750upx;
		height: 100vh;
		background: #000;
	}
</style>
